
<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_tms_waybill_line_split')" :visible.sync="visible" custom-class="dialog_default"
    v-loading="loading">

    <el-form :label-width="$globalCss.formLabelWidth_default" :model="form" :rules="rules" ref="Form">

      <!-- <el-steps align-center :active="returnList.length" >
        <el-step :title="`${item.provinceName}|${item.cityName}|${item.countyName}`" icon="el-icon-truck" :key="index"
          v-for="(item, index) in returnList"
          :description="item.address"></el-step>
      </el-steps> -->
      <div class="flex_row_wrap">

        <el-form-item :label="$tt('label_tms_transfer_point')" prop="tempPlaceId">
          <place_select v-model="tempPlaceId" class="form_input_small" typeEnum="TRANSIT_POINT" :checkCountry="false"
            @changeItem="e => tempPlace = e ? e : null" />
        </el-form-item>
        <el-form-item :label="$tt('label_tms_sort')" prop="tempSort">
          <ex_super_input v-model="tempSort" type="select" :items="sorts"></ex_super_input>
        </el-form-item>

        <el-form-item label="">
          <el-button @click="clickBreak">{{ $tt('label_add') }}</el-button>
        </el-form-item>
      </div>

      <ex_super_table :data="itemList" v-bind="option_table" :max-height="400" />
    </el-form>
    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import place_select from '@/component/tms/place_select'
export default {
  components: { place_select, },
  data() {
    return {
      tempPlaceId: null,
      tempPlace: null,
      tempSort: null,
      visible: false,

      loading: false,
      item: {},
      form: {},
      returnList: [],
      itemList: [],
      rules: {

      },
      option_table: {
        model: [
          { key: 'provinceName', label: 'label_tms_province', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'cityName', label: 'label_tms_city', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'countyName', label: 'label_tms_area', 'min-width': 100, 'show-overflow-tooltip': true, },
          { key: 'address', label: 'label_tms_address', 'min-width': 100, 'show-overflow-tooltip': true, },
          {
            type: 'operate', 'width': 150, operate: [
              {
                label: 'label_remove', class: 'button_text_danger', if: (row) => !row.org,
                click: (row, i, list) => {
                  list.splice(i, 1)
                }
              }
            ]
          }
        ]
      }

    }
  },
  computed: {

    sorts() {
      let list = []
      for (let i = 0; i < this.itemList.length - 1; i++) {
        list.push({ label: i + 1, value: i + 1 })
      }
      return list
    },

  },
  methods: {


    show(item,) {
      this.visible = true
      this.item = Object.assign(_.cloneDeep(item))
      this.tempSort = null
      this.form = {}
      this.loading = true
      this.$ajax({
        url: "/tms-api/waybill/TmsWaybillInfoQueryRpc/selectBreakUpLine.json",
        method: 'post',
        loading: true,
        data: {
          version: this.item.version,
          id: this.item.id,
        },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          res.data.rows.forEach(it => it.org = true)
          this.itemList = res.data.rows
        },
      })
    },

    clickBreak() {
      if (this.tempPlaceId == null) {
        return this.$message.error(this.$tt('label_tms_select_transfer_point'))
      }
      if (this.tempSort == null) {
        return this.$message.error(this.$tt('label_tms_select_sort'))
      }
      if (this.itemList.some(it => it.placeId == this.tempPlaceId)) {
        return this.$message.error(this.$tt('label_tms_not_add_repetition_point'))
      }
      this.tempPlace.provinceName = this.tempPlace.province
      this.tempPlace.cityName = this.tempPlace.city
      this.tempPlace.countyName = this.tempPlace.county
      this.itemList.splice(this.tempSort, 0, this.tempPlace)
    },
    hide() {
      this.visible = false
    },
    submit() {
      this.$ajax({
        url: "/tms-api/waybill/TmsWaybillInfoOperationRpc/breakUpByLine.json",
        method: 'post', type: 'json',
        loading: true,
        data: {
          version: this.item.version,
          id: this.item.id,
          lineVOList: this.itemList.map((it, index) => {
            it.sort = index
            return it
          })
        },
        success: (res) => {
          this.$message.success(this.$tt('tip_submit_success'))
          this.hide()
          this.$emit('submitSuccess')
        },
      })


    },

  }
}
</script>
